﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    
</head>

<body>
    <!--Step:1 Prepare a dom for ECharts which (must) has size (width & hight)-->
    <!--Step:1 为ECharts准备一个具备大小（宽高）的Dom-->
    <div id="main" style="width: 400px; height:400px; border:1px solid #ccc;padding:10px;"></div>
    <div id="mainMap" style="height:500px;border:1px solid #ccc;padding:10px;"></div>
    
    <!--Step:2 Import echarts.js-->
    <!--Step:2 引入echarts.js-->
    
    <!--
    	<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    -->
    <script src="js/echarts.js"></script>
    <script type="text/javascript">
        require.config({
            paths: {
                echarts: 'js'
                // echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
         require(
            [
                'echarts',
                'echarts/chart/funnel',   // 按需加载所需图表，如需动态类型切换功能，别忘了同时加载相应图表
                'echarts/chart/pie',
                'echarts/chart/line'
            ],
            function (ec) {
                var myChart = ec.init(document.getElementById('main'));
              var  option = {
							    title : {						//标题
							        text: '某站点用户访问来源',    //主标题文本，'\n'指定换行
							        link:'demoPie2.html',	 //主标题文本超链接
							        subtext: '纯属虚构',        //副标题文本，'\n'指定换行
							        sublink:'demoPie3.html', //副标题文本超链接
							        x:'center'                //水平安放位置，默认为左侧，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
//							    	y:'bottom'
							    },
							    tooltip : {	//提示框，鼠标悬浮交互时的信息提示
							    	show:true,		//显示策略，可选为：true（显示） | false（隐藏）
							        showContent:true,
							        trigger: 'item',	//触发类型，默认数据触发，见下图，可选为：'item' | 'axis'
							       
							        formatter: "{a} <br/>{b} : {c} ({d}%)"
							    },
							    legend: {		//图例，每个图表最多仅有一个图例，混搭图表共享
							    	show:true,
							        orient : 'vertical',  //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
							        x : 'left',		//水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
							        y :	'top',		//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
							        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
							        //图例内容数组，数组项通常为{string}，每一项代表一个系列的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
							    },
								
							    toolbox: { 		//工具箱，每个图表最多仅有一个工具箱
							        show : true,
							        orient : 'horizontal',  //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
							       showTitle:true,		//是否显示工具箱文字提示，默认启用
							       feature : {    //启用功能，目前支持feature见下，工具箱自定义功能回调处理，try this »
							            mark : {show: true},//辅助线标志
							            dataView : {show: true, readOnly: false},//数据视图    . readOnly true : 只读的。
							            magicType : {
							            //动态类型切换，支持直角系下的折线图、柱状图、堆积、平铺转换，上图icon左数6~14，分别是切换为堆积，
							            // 切换为平铺，切换折线图，切换柱形图，切换为力导向布局图，切换为和弦图，切换为饼图，切换为漏斗图
							                show: true,
							                type: ['pie', 'funnel'],//'line', 'bar', 'stack', 'tiled', 'force', 'chord', 'pie', 'funnel'
							                option: {     //可传入切换是动态修改的配置，将复写series内的数组项
							                    funnel: {
							                        x: '25%',
							                        width: '50%',
							                        funnelAlign: 'left',
							                        max: 1548
							                    }
							                }
							            },
							            restore : {show: true},//还原，复位原始图表，上图icon右数2
							            saveAsImage : {show: true}//保存图片（IE8-不支持），上图icon最右，可设置更多属性
							        }
							    },
							    calculable : false,//是否启用拖拽重计算特性，默认关闭，相关的还有 calculableColor， calculableHolderColor， nameConnector， valueConnector）
							    series : [
							        {
							            name:'访问来源',//系列名称，如启用legend，该值将被legend.data索引相关
							            type:'pie',//图表类型，必要参数！如为空或不支持类型，则该系列数据不被显示。可选为：
													//'line'（折线图） | 'bar'（柱状图） | 'scatter'（散点图） | 'k'（K线图）
													//'pie'（饼图） | 'radar'（雷达图） | 'chord'（和弦图） | 'force'（力导向布局图） | 'map'（地图）
							            radius : '35%',//半径，支持绝对值（px）和百分比，百分比计算比，min(width, height) / 2 * 75%， 传数组实现环形图，[内半径，外半径]
							            //相对于包裹图表的div。直径所占的百分比。
							            center: ['50%', '50%'],//圆心坐标，支持绝对值（px）和百分比，百分比计算min(width, height) * 50%.
							           	//左上角开始算
							          clickable:true,
							           itemStyle : {   //图形样式
						                normal : { //默认样式
						                    label : {
								//标签，饼图默认显示在外部，离饼图距离由labelLine.length决定，
								//漏斗图默认显示在右侧，离图形距离由labelLine.length决定
								//地图标签不可指定位置，
								//折线图，柱形图，K线图，散点图可指定position见下
						                        show : false
						                    },
						                    labelLine : {
						                        show : false
						                    }
						                },
						                emphasis : {   //强调样式（悬浮时样式）
						                    label : {
						                        show : true
						                    },
						                    labelLine : {  //标签视觉引导线，默认显示
						                        show : true
						                    }
						                }
						            },
							         
							          data:[    //标注图形数据
							                {value:0.3, name:'直接访问'},
							                {value:0.4, name:'邮件营销'},
							                {value:0.1, name:'联盟广告'},
							                {value:0.1, name:'视频广告'},
							                {value:0.1, name:'搜索引擎'}
							            ]
							        }
							    ]
							};
                myChart.setOption(option);
                
                var ecConfig = require('echarts/config');
                  function fe(e){
		        	var a = e.pageX;
		        	alert(a);
		         }
				function eConsole(param) {
					
				    var mes = '【' + param.type + '】';
				    if (typeof param.seriesIndex != 'undefined') {
				        mes += '  seriesIndex : ' + param.seriesIndex;
				        mes += '  dataIndex : ' + param.dataIndex;
				    }
//				    alert(param.seriesIndex);
//				    if (param.type == 'hover') {
//				        document.getElementById('hover-console').innerHTML = 'Event Console : ' + mes;
//				    }
//				    else {
//				        document.getElementById('console').innerHTML = mes;
//				    }
					var e = window.event;
					var x = e.pageX;
					var y = e.pageY;
					
//					var h = $("#main div.echarts-tooltip.zr-element").height();
					
//					alert(h);

//				    console.log(param);
				}
                myChart.on(ecConfig.EVENT.HOVER, eConsole);
//		myChart.on(ecConfig.EVENT.DBLCLICK, eConsole);
		//myChart.on(ecConfig.EVENT.HOVER, eConsole);
//		myChart.on(ecConfig.EVENT.DATA_ZOOM, eConsole);
		myChart.on(ecConfig.EVENT.LEGEND_SELECTED, eConsole);
//		myChart.on(ecConfig.EVENT.MAGIC_TYPE_CHANGED, eConsole);
//		myChart.on(ecConfig.EVENT.DATA_VIEW_CHANGED, eConsole);
	
			

            }
        );
      
    </script>
   
</body>
</html>